<template>
    <div>
        <el-button type="primary" @click="handelCreate">创建</el-button>
        <el-table :data="tableData" style="width: 100%;margin-top: 10px;">
            <el-table-column v-for="(item, index) in colunm" :key="index" :width="item.width" :prop="item.prop"
                :label="item.label" />
            <el-table-column label="操作" fixed="right" width="100px">
                <template v-slot="scope">
                    <span class="cursor" @click="handelEdit(scope.row)">修改</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 创建弹窗 -->
        <el-dialog title="创建" v-model="CreatedialogVisible" append-to-body destroy-on-close>
            <Create @success="success" @close="close" />
        </el-dialog>
        <!-- 修改弹窗 -->
        <el-dialog title="修改" v-model="EditdialogVisible" append-to-body destroy-on-close>
            <Edit @success="success" @close="close" :EditData="EditData" />
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import Create from './components/Create.vue';
import Edit from './components/Edit.vue';
const colunm = ref([
    {
        label: '姓名',
        prop: 'name',
    },
    {
        label: '性别',
        prop: 'sex',
    },
])

const tableData = ref([
    {
        sex: '男',
        name: 'Tom',
    },
    {
        sex: '男',
        name: '段红运',
    },
    {
        sex: '女',
        name: '焦凯航',
    },

])

const CreatedialogVisible = ref(false)
const EditdialogVisible = ref(false)
const EditData = ref({})
function handelCreate() {
    CreatedialogVisible.value = true
}


function handelEdit(row) {
    console.log(row)
    EditdialogVisible.value = true
    EditData.value = row
}

// 成功事件
function success(data) {
    console.log(data)
    tableData.value.push({ name: data.name, sex: data.sex })
}

// 关闭事件
function close() {
    CreatedialogVisible.value = false
    EditdialogVisible.value = false

}

</script>

<style lang="less" scoped>
.cursor {
    font-size: 14px;
    color: rgb(49, 121, 177);
    cursor: pointer;
}
</style>